<template>
  <div class="dashboard-container">
    <div class="row" style="height: 100%">
      <div>
        <div class="row top">
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>教练员</p>
            <el-link type="primary" href="#/staff/allEmployee" class="empCount">{{empCount}}</el-link>
          </div>
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>运动员</p>
            <el-link type="primary" href="#/person/player/referPlayer" class="playerCount">{{playerCount}}</el-link>
          </div>
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>训练计划</p>
            <el-link type="primary" href="#/trainPlan/view" class="planCount">
              {{[6,8,1,0,12,13].indexOf(roleId)<=-1?planCount:0}}
            </el-link>
          </div>
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>科研医务</p>
            <el-link type="primary" href="#/medical/selection/reportSearch" class="metaCount">
              {{[6,1,0,12,13].indexOf(roleId)<=-1?metaCount:0}}
            </el-link>
          </div>
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>常规管理</p>
            <el-link type="primary" href="#/trainPlan/all4regulationManagement" class="trainPlan">
              {{[6,8,9,1,0,12,13].indexOf(roleId)<=-1?regulationCount:0}}
            </el-link>
          </div>
          <div class="top-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>扫码下载APP</p>
            <div class="code" style="display: flex;justify-content: center;align-items: center;">
              <div id="qrcode" ref="qrcode"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="row content">
          <div class="col-md-4 content-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <div id="personCharts" style="width: 100%;height:100%;"></div>
          </div>
          <div class="col-md-4 content-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <div id="matchCharts" style="width: 100%;height:100%;"></div>
          </div>
          <div class="col-md-4 content-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <div id="planCharts" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="row bottom">
          <div class="col-md-4 bottom-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>训练计划</p>
            <div v-if="[6,1,0,12,13].indexOf(roleId)>-1">
              <div style="width: 100%;height: 100%;text-align: center"><svg t="1621477477358" class="icon"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7329" width="200"
                  height="200">
                  <path
                    d="M790.5 864.7H233.1c-11 0-20-9-20-20V150.3c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 20-20 20z"
                    fill="#93C4FF" p-id="7330"></path>
                  <path
                    d="M790.5 854.8H233.1c-11 0-20-9-20-20V140.5c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 19.9-20 19.9z"
                    fill="#A9D4FF" p-id="7331"></path>
                  <path d="M247.4 146.8h528.8v671.3H247.4z" fill="#FAFDFF" p-id="7332"></path>
                  <path
                    d="M645.3 175.4H383.1c-5.5 0-10-4.5-10-10V81.2c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.6-4.5 10.1-10 10.1z"
                    fill="#93C4FF" p-id="7333"></path>
                  <path
                    d="M645.3 168.2H383.1c-5.5 0-10-4.5-10-10V74.1c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.5-4.5 10-10 10zM278 314.2h134.7v134.7H278zM444.1 314.2h134.7v134.7H444.1zM610.3 314.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7334"></path>
                  <path
                    d="M796.1 940.1c-0.4 0.8-1.3 1.6-2.9 2.4h-0.1c-20.3 10-138 17.6-280 17.6s-259.8-7.6-280.1-17.6c-0.7-0.3-1.3-0.7-1.7-1-0.1-0.1-0.3-0.2-0.4-0.4-0.5-0.4-0.8-0.9-0.9-1.4l0.4-1.5c8.9-10.9 132-19.4 282.7-19.4 148.8 0 270.8 8.3 282.3 19l0.7 2.3z"
                    fill="#DCF1FF" p-id="7335"></path>
                  <path d="M312.5 246.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7336"></path>
                  <path
                    d="M450 231.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 259.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6zM278 610.2h134.7v134.7H278zM444.1 610.2h134.7v134.7H444.1zM610.3 610.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7337"></path>
                  <path d="M312.5 542.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7338"></path>
                  <path
                    d="M450 527.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 555.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6z"
                    fill="#BBE0FF" p-id="7339"></path>
                </svg></div>
            </div>
            <div class="trainingPlan pre-scrollable" v-else>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">周训练计划
                <div>
                  <el-link type="primary" href="#/trainPlan/weekPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/WeekPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">全年训练计划
                <div>
                  <el-link type="primary" href="#/trainPlan/fullYearPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewFullYearPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">阶段训练计划表
                <div>
                  <el-link type="primary" href="#/trainPlan/periodPlanExcel">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewTrainPlanExcelMk">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">阶段训练计划
                <div>
                  <el-link type="primary" href="#/trainPlan/periodPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewPeriodPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">全年训练总结
                <div>
                  <el-link type="primary" href="#/trainPlan/fullYearSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewFullYearSummary">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">冬训阶段计划
                <div>
                  <el-link type="primary" href="#/trainPlan/winterPeriodPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewWinterPeriodPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">冬训小结
                <div>
                  <el-link type="primary" href="#/trainPlan/winterSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewWinterSummary">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">赛前阶段计划
                <div>
                  <el-link type="primary" href="#/trainPlan/pre_MatchPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewPre_MatchPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8].indexOf(roleId)<=-1">参赛预案
                <div>
                  <el-link type="primary" href="#/trainPlan/matchScheme">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewMatchScheme">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[11].indexOf(roleId)<=-1">比赛小结
                <div>
                  <el-link type="primary" href="#/trainPlan/matchSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewMatchSummary">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8].indexOf(roleId)<=-1">年度比赛总结
                <div>
                  <el-link type="primary" href="#/trainPlan/yearMatchSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewYearMatchSummary">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">多年训练计划
                <div>
                  <el-link type="primary" href="#/trainPlan/multiYearPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewMultiYearPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[8,11].indexOf(roleId)<=-1">年度专业研究论文
                <div>
                  <el-link type="primary" href="#/trainPlan/yearPaper">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewYearPaper">撰写</el-link>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 bottom-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>科研医务</p>
            <div v-if="[6,1,0,12,13].indexOf(roleId)>-1">
              <div style="width: 100%;height: 100%;text-align: center"><svg t="1621477477358" class="icon"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7329" width="200"
                  height="200">
                  <path
                    d="M790.5 864.7H233.1c-11 0-20-9-20-20V150.3c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 20-20 20z"
                    fill="#93C4FF" p-id="7330"></path>
                  <path
                    d="M790.5 854.8H233.1c-11 0-20-9-20-20V140.5c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 19.9-20 19.9z"
                    fill="#A9D4FF" p-id="7331"></path>
                  <path d="M247.4 146.8h528.8v671.3H247.4z" fill="#FAFDFF" p-id="7332"></path>
                  <path
                    d="M645.3 175.4H383.1c-5.5 0-10-4.5-10-10V81.2c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.6-4.5 10.1-10 10.1z"
                    fill="#93C4FF" p-id="7333"></path>
                  <path
                    d="M645.3 168.2H383.1c-5.5 0-10-4.5-10-10V74.1c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.5-4.5 10-10 10zM278 314.2h134.7v134.7H278zM444.1 314.2h134.7v134.7H444.1zM610.3 314.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7334"></path>
                  <path
                    d="M796.1 940.1c-0.4 0.8-1.3 1.6-2.9 2.4h-0.1c-20.3 10-138 17.6-280 17.6s-259.8-7.6-280.1-17.6c-0.7-0.3-1.3-0.7-1.7-1-0.1-0.1-0.3-0.2-0.4-0.4-0.5-0.4-0.8-0.9-0.9-1.4l0.4-1.5c8.9-10.9 132-19.4 282.7-19.4 148.8 0 270.8 8.3 282.3 19l0.7 2.3z"
                    fill="#DCF1FF" p-id="7335"></path>
                  <path d="M312.5 246.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7336"></path>
                  <path
                    d="M450 231.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 259.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6zM278 610.2h134.7v134.7H278zM444.1 610.2h134.7v134.7H444.1zM610.3 610.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7337"></path>
                  <path d="M312.5 542.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7338"></path>
                  <path
                    d="M450 527.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 555.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6z"
                    fill="#BBE0FF" p-id="7339"></path>
                </svg></div>
            </div>
            <div class="row assessment pre-scrollable" v-else>
              <div class="col-md-3 assessment-module" :style="{backgroundColor: $store.state.user.baseColor}">科学选材
                <div>
                  <el-link type="primary" href="#/medical/selection/reportSearch">选材报告查询</el-link>
                  <el-link type="primary" href="#/medical/selection/singleInput">选材单次录入</el-link>
                  <el-link type="primary" href="#/medical/selection/massInput">选材批量录入</el-link>
                  <el-link type="primary" href="#/medical/selection/dataFix">选材数据修改</el-link>
                  <el-link type="primary" href="#/medical/selection/evaluationReport">选材测评报告</el-link>
                  <el-link type="primary" href="#/medical/selection/testCollection">选材测试汇总</el-link>
                </div>
                <div class="icon-font">
                  <svg t="1621234763672" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="8201" width="200" height="200">
                    <path
                      d="M552.865733 412.342256c-24.826432-27.662013-60.311621-43.545772-97.342002-43.545772l-73.890894 0c-37.030381 0-72.516594 15.883759-97.357352 43.545772L165.250648 545.056883c-5.943362 6.637164-5.661953 16.788361 0.581238 23.076578l40.530089 40.770566c3.272533 3.27765 7.605212 5.202489 12.32163 4.88424 4.603855-0.152473 8.93551-2.208295 11.95631-5.702885l85.415368-98.331539 0 433.44283c0 9.267061 7.442506 16.756639 16.624632 16.756639l57.305147 0c9.163707 0 16.620539-7.490601 16.620539-16.756639L406.605601 690.713264l24.028253 0 0 252.484432c0 9.267061 7.438413 16.756639 16.620539 16.756639l57.256028 0c9.182127 0 16.604166-7.490601 16.570397-16.756639L521.080819 509.770216l85.435835 98.31619c3.054569 3.494591 7.40669 5.550413 12.004405 5.702885 4.451382 0.347924 9.05012-1.62194 12.287861-4.88424l40.485063-40.770566c6.293333-6.303566 6.510274-16.439414 0.562818-23.076578L552.865733 412.342256zM852.849992 65.044412l-85.636403 0c-10.289344 0-18.643616 8.351202-18.643616 18.682501 0 10.29139 8.337899 18.661012 18.643616 18.661012l66.976414 0 0 177.061648L788.66618 279.449573c-10.326183 0-18.642592 8.372691-18.642592 18.681478 0 10.292414 8.316409 18.665105 18.642592 18.665105l45.5228 0 0 177.041182L788.66618 493.837338c-10.326183 0-18.642592 8.355295-18.642592 18.665105 0 10.308787 8.316409 18.676361 18.642592 18.676361l45.5228 0 0 177.027879L788.66618 708.206684c-10.326183 0-18.642592 8.311293-18.642592 18.661012 0 10.347672 8.316409 18.681478 18.642592 18.681478l45.5228 0 0 177.061648-66.976414 0c-10.305717 0-18.643616 8.350179-18.643616 18.659989 0 10.331299 8.337899 18.681478 18.643616 18.681478l85.619006 0c10.288321 0 18.60473-8.351202 18.622126-18.681478L871.453698 83.705424C871.453698 73.395614 863.138312 65.044412 852.849992 65.044412zM418.593634 344.597339c51.277874 0 93.02365-42.042535 93.02365-93.684706 0-51.642171-41.745776-93.665263-93.02365-93.665263-51.293223 0-93.02058 42.023092-93.02058 93.665263C325.573053 302.570153 367.30041 344.597339 418.593634 344.597339z"
                      p-id="8202" fill="#28a745"></path>
                  </svg>
                </div>
              </div>
              <div class="col-md-3 assessment-module" :style="{backgroundColor: $store.state.user.baseColor}">大纲考核
                <div>
                  <el-link type="primary" href="#/medical/assessment/reportSearch">考核报告查询</el-link>
                  <el-link type="primary" href="#/medical/assessment/singleInput">考核单次录入</el-link>
                  <el-link type="primary" href="#/medical/assessment/massInput">考核批量录入</el-link>
                  <el-link type="primary" href="#/medical/assessment/dataFix">考核数据修改</el-link>
                  <el-link type="primary" href="#/medical/assessment/testReport">考核测评报告</el-link>
                  <el-link type="primary" href="#/medical/assessment/collection">考核报告汇总</el-link>
                  <el-link type="primary" href="#/medical/assessment/tendencyAnalysis">考核趋势分析</el-link>
                </div>
                <div class="icon-font">
                  <svg t="1621234907837" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="8435" width="200" height="200">
                    <path
                      d="M428.8 579.2c-12.8-12.8-22.4-28.8-44.8-25.6-44.8 3.2-86.4 0-131.2 0-16 0-28.8 3.2-28.8 19.2s16 19.2 28.8 19.2h166.4c9.6 0 22.4-3.2 9.6-12.8z m-176-140.8c28.8 0 54.4-3.2 83.2 0 32 3.2 57.6-6.4 80-38.4H256c-19.2 0-32 0-32 19.2 0 12.8 12.8 19.2 28.8 19.2zM243.2 512h96c6.4 0 19.2 6.4 22.4-9.6 0-12.8-3.2-22.4-16-25.6-35.2-3.2-70.4-3.2-105.6 0-9.6 0-19.2 9.6-16 19.2 3.2 9.6 9.6 16 19.2 16z m553.6-86.4c-12.8-28.8-38.4-16-57.6-16-19.2 0-38.4 22.4-54.4 6.4-12.8-12.8-22.4-35.2-28.8-51.2-9.6-25.6-28.8-41.6-41.6-67.2 54.4 22.4 86.4 0 102.4-25.6 19.2-28.8 12.8-70.4-12.8-92.8-25.6-22.4-64-25.6-89.6-9.6-35.2 22.4-41.6 54.4-16 115.2-38.4-12.8-70.4-32-105.6-44.8-16-3.2-28.8-19.2-44.8-12.8-41.6 19.2-83.2 35.2-124.8 57.6-25.6 12.8-32 28.8-19.2 48 9.6 16 32 22.4 51.2 12.8 19.2-9.6 38.4-16 54.4-25.6 28.8-16 57.6-16 86.4 3.2 19.2 12.8 16 19.2 3.2 35.2-32 28.8-64 57.6-92.8 92.8-19.2 25.6-19.2 51.2 3.2 73.6 28.8 28.8 57.6 54.4 86.4 80 9.6 9.6 16 16-3.2 19.2-28.8 6.4-54.4 12.8-83.2 19.2-19.2 3.2-38.4 22.4-35.2 41.6 3.2 19.2 28.8 32 51.2 28.8 54.4-12.8 112-25.6 166.4-38.4 28.8-6.4 41.6-35.2 25.6-57.6s-32-41.6-48-64c-35.2-51.2-35.2-51.2 9.6-96 25.6-25.6 25.6-25.6 44.8 6.4 9.6 12.8 16 32 38.4 28.8 41.6-3.2 83.2-12.8 121.6-25.6 12.8-3.2 19.2-25.6 12.8-41.6z m-208 259.2c-19.2 16-48 6.4-70.4 19.2-6.4 3.2-12.8 9.6-16 16-19.2 28.8-38.4 60.8-57.6 92.8-12.8 19.2-6.4 32 6.4 44.8 16 12.8 35.2 12.8 48-6.4l105.6-144c6.4-16-3.2-19.2-16-22.4z"
                      p-id="8436" fill="#f3c336"></path>
                  </svg>
                </div>
              </div>
              <div class="col-md-3 assessment-module" :style="{backgroundColor: $store.state.user.baseColor}">机能监控
                <div>
                  <el-link type="primary" href="#/medical/monitor/reportSearch">机能报告查询</el-link>
                  <el-link type="primary" href="#/medical/monitor/singleInput">机能单次录入</el-link>
                  <el-link type="primary" href="#/medical/monitor/massInput">机能批量录入</el-link>
                  <el-link type="primary" href="#/medical/monitor/dataFix">机能数据修改</el-link>
                  <el-link type="primary" href="#/medical/monitor/dailyReport">机能日常报告</el-link>
                  <el-link type="primary" href="#/medical/monitor/compareReport">机能对比汇总</el-link>
                  <el-link type="primary" href="#/medical/monitor/tendencyAnalysis">机能趋势分析</el-link>
                </div>
                <div class="icon-font">
                  <svg t="1621325368513" class="icon" viewBox="0 0 1187 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3041" width="200" height="200">
                    <path
                      d="M1003.52 20.48a81.92 81.92 0 0 1 81.92 81.92v819.2a81.92 81.92 0 0 1-81.92 81.92h-819.2a81.92 81.92 0 0 1-81.92-81.92v-819.2a81.92 81.92 0 0 1 81.92-81.92h819.2z m0 61.44h-819.2a20.48 20.48 0 0 0-20.15232 16.7936L163.84 102.4v819.2a20.48 20.48 0 0 0 16.7936 20.15232L184.32 942.08h819.2a20.48 20.48 0 0 0 20.15232-16.7936L1024 921.6v-819.2a20.48 20.48 0 0 0-16.7936-20.15232L1003.52 81.92z"
                      fill="#6ba8e4" p-id="3042"></path>
                    <path
                      d="M430.08 184.32a40.96 40.96 0 0 1 40.96 40.96v163.84a40.96 40.96 0 0 1-40.96 40.96h-163.84a40.96 40.96 0 0 1-40.96-40.96v-163.84a40.96 40.96 0 0 1 40.96-40.96h163.84zM409.6 245.76H286.72v122.88h122.88V245.76z"
                      fill="#6ba8e4" p-id="3043"></path>
                    <path
                      d="M409.10848 497.17248c14.45888-17.73568 38.74816-23.26528 56.97536-4.62848l3.15392 3.44064c10.07616 11.8784 16.7936 30.18752 47.63648 127.71328l23.18336 73.5232c9.8304 30.96576 17.28512 53.57568 23.79776 72.0896l3.8912 10.8544 7.9872-15.5648 42.84416-86.6304c3.2768-6.47168 6.144-12.00128 8.97024-17.2032l4.17792-7.70048c20.48-36.90496 28.38528-47.63648 51.11808-47.63648 24.20736 0 48.25088 20.8896 84.33664 67.33824l10.69056 14.04928H921.6a30.72 30.72 0 0 1 30.43328 26.58304l0.28672 4.17792a30.72 30.72 0 0 1-26.54208 30.43328l-4.17792 0.28672h-174.73536l-9.216-12.57472a634.88 634.88 0 0 0-42.1888-52.79744l-6.3488-6.5536-9.50272 17.36704c-3.39968 6.38976-7.04512 13.55776-11.63264 22.77376l-37.64224 76.30848c-3.52256 6.9632-6.5536 12.86144-9.4208 18.26816l-6.30784 11.6736-7.5776 13.39392c-15.23712 26.2144-23.83872 34.24256-43.54048 34.24256-23.1424 0-29.9008-6.9632-44.81024-45.91616l-8.27392-22.28224a2011.136 2011.136 0 0 1-25.55904-75.93984l-28.672-90.43968-17.12128-52.8384-0.12288 0.6144a1328.3328 1328.3328 0 0 0-18.59584 73.40032l-5.85728 26.37824-5.28384 24.1664H225.28a30.72 30.72 0 0 1-4.17792-61.11232l4.17792-0.28672 134.51264-0.04096 0.77824-3.31776c10.0352-43.90912 19.12832-77.78304 27.40224-101.86752l2.4576-6.9632c6.02112-16.50688 11.8784-28.38528 18.67776-36.78208z"
                      fill="#6ba8e4" p-id="3044"></path>
                    <path
                      d="M921.6 194.56a30.72 30.72 0 0 1 4.17792 61.15328l-4.17792 0.28672h-163.84a30.72 30.72 0 0 1-4.17792-61.15328l4.17792-0.28672h163.84zM921.6 337.92a30.72 30.72 0 0 1 4.17792 61.15328l-4.17792 0.28672h-286.72a30.72 30.72 0 0 1-4.17792-61.15328l4.17792-0.28672h286.72z"
                      fill="#6ba8e4" p-id="3045"></path>
                  </svg>
                </div>
              </div>
              <div class="col-md-3 assessment-module" :style="{backgroundColor: $store.state.user.baseColor}">疾病筛查
                <div>
                  <el-link type="primary" href="#/medical/filter/reportSearch">疾病报告查询</el-link>
                  <el-link type="primary" href="#/medical/filter/singleInput">疾病单次录入</el-link>
                  <el-link type="primary" href="#/medical/filter/massInput">疾病批量录入</el-link>
                  <el-link type="primary" href="#/medical/filter/dataFix">疾病数据修改</el-link>
                  <el-link type="primary" href="#/medical/filter/dailyReport">疾病日常报告</el-link>
                  <el-link type="primary" href="#/medical/filter/tendencyAnalysis">疾病趋势分析</el-link>
                </div>
                <div class="icon-font">
                  <svg t="1621234986046" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="8865" width="200" height="200">
                    <path d="M963 959.1H410.5V59H963v900.1z m-482.5-70H893V129H480.5v760.1z" fill="#ff8b8e" p-id="8866">
                    </path>
                    <path
                      d="M480.5 959.1H63V221h417.5v738.1z m-347.5-70h277.5V291H133v598.1zM574.2 658h227.2v237.3H574.2z"
                      fill="#ff8b8e" p-id="8867"></path>
                    <path
                      d="M238.5 394.6h70.7V459h-70.7zM238.5 535.5h70.7v64.4h-70.7zM238.5 675.8h70.7v64.4h-70.7zM652.9 256h70v192.3h-70z"
                      fill="#ff8b8e" p-id="8868"></path>
                    <path d="M589.8 317.1h192.3v70H589.8z" fill="#ff8b8e" p-id="8869"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 bottom-module" :style="{backgroundColor: $store.state.user.baseColor}">
            <p>常规管理</p>
            <div v-if="[6,1,0,12,13,9].indexOf(roleId)>-1">
              <div style="width: 100%;height: 100%;text-align: center"><svg t="1621477477358" class="icon"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7329" width="200"
                  height="200">
                  <path
                    d="M790.5 864.7H233.1c-11 0-20-9-20-20V150.3c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 20-20 20z"
                    fill="#93C4FF" p-id="7330"></path>
                  <path
                    d="M790.5 854.8H233.1c-11 0-20-9-20-20V140.5c0-11 9-20 20-20h557.4c11 0 20 9 20 20v694.4c0 11-9 19.9-20 19.9z"
                    fill="#A9D4FF" p-id="7331"></path>
                  <path d="M247.4 146.8h528.8v671.3H247.4z" fill="#FAFDFF" p-id="7332"></path>
                  <path
                    d="M645.3 175.4H383.1c-5.5 0-10-4.5-10-10V81.2c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.6-4.5 10.1-10 10.1z"
                    fill="#93C4FF" p-id="7333"></path>
                  <path
                    d="M645.3 168.2H383.1c-5.5 0-10-4.5-10-10V74.1c0-5.5 4.5-10 10-10h262.2c5.5 0 10 4.5 10 10v84.1c0 5.5-4.5 10-10 10zM278 314.2h134.7v134.7H278zM444.1 314.2h134.7v134.7H444.1zM610.3 314.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7334"></path>
                  <path
                    d="M796.1 940.1c-0.4 0.8-1.3 1.6-2.9 2.4h-0.1c-20.3 10-138 17.6-280 17.6s-259.8-7.6-280.1-17.6c-0.7-0.3-1.3-0.7-1.7-1-0.1-0.1-0.3-0.2-0.4-0.4-0.5-0.4-0.8-0.9-0.9-1.4l0.4-1.5c8.9-10.9 132-19.4 282.7-19.4 148.8 0 270.8 8.3 282.3 19l0.7 2.3z"
                    fill="#DCF1FF" p-id="7335"></path>
                  <path d="M312.5 246.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7336"></path>
                  <path
                    d="M450 231.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 259.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6zM278 610.2h134.7v134.7H278zM444.1 610.2h134.7v134.7H444.1zM610.3 610.2H745v134.7H610.3z"
                    fill="#BBE0FF" p-id="7337"></path>
                  <path d="M312.5 542.2m-39 0a39 39 0 1 0 78 0 39 39 0 1 0-78 0Z" fill="#BBE0FF" p-id="7338"></path>
                  <path
                    d="M450 527.5h-70.4c-3.9 0-7-3.1-7-7v-3.9c0-3.9 3.1-7 7-7H450c3.9 0 7 3.1 7 7v3.9c0 3.9-3.1 7-7 7zM420.3 555.6h-41.7c-3.3 0-6-2.7-6-6v-3.3c0-3.3 2.7-6 6-6h41.7c3.3 0 6 2.7 6 6v3.3c0 3.3-2.7 6-6 6z"
                    fill="#BBE0FF" p-id="7339"></path>
                </svg></div>
            </div>
            <div class="routine pre-scrollable" v-else>
              <div class="plan" v-show="[7,10,11].indexOf(roleId)<=-1">训练单位训练工作计划
                <div>
                  <el-link type="primary" href="#/trainPlan/unitPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewUnitPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[7,10,11].indexOf(roleId)<=-1">训练单位训练工作总结
                <div>
                  <el-link type="primary" href="#/trainPlan/unitSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewUnitSummary">撰写</el-link>
                </div>
              </div>
              <div class="plan">常规管理制度
                <div>
                  <el-link type="primary" href="#/regulation/regulation">查看</el-link>
                  <el-link type="primary" href="#/plan/viewRegulation">撰写</el-link>
                </div>
              </div>
              <div class="plan">公告和通知
                <div>
                  <el-link type="primary" href="#/regulation/activityHonorReword">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewHonorReword">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[4,10,11].indexOf(roleId)<=-1">科研工作计划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/science">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewScience">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[4,10,11].indexOf(roleId)<=-1">反兴奋剂工作计划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/antiDoping">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewAntiDoping">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[4,7].indexOf(roleId)<=-1">教育工作计划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/eduWorking">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewEduWorking">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[4,7].indexOf(roleId)<=-1">德育工作计划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/moralEducation">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewMoralEducation">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[4,7,10,11].indexOf(roleId)<=-1">梯队建设工作计划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/echelonConstruction">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewEchelonConstruction">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[3,4,10].indexOf(roleId)<=-1">训练部门中长期训练规划
                <div>
                  <el-link type="primary" href="#/trainPlan/trainDepartmentMiddleLongPlan">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewTrainDepartmentMiddleLongPlan">撰写</el-link>
                </div>
              </div>
              <div class="plan" v-show="[3,4,10].indexOf(roleId)<=-1">培训规划及总结
                <div>
                  <el-link type="primary" href="#/trainPlan/trainPlanAndSummary">查看</el-link>
                  <el-link type="primary" href="#/trainPlan/viewTrainPlanAndSummary">撰写</el-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    mapGetters
  } from 'vuex'
  import {
    plan_doc_select,
    all4regulationManagement
  } from '@/api/plan.js'
  import {
    empInit,
    player_select,
  } from '@/api/person.js'
  import {
    match_statistics_all
  } from '@/api/organization.js'
  import {
    meta_data_selectPlayers
  } from '@/api/meta.js'
  import QRCode from "qrcodejs2"
  export default {
    name: 'Dashboard',
    data() {
      return {
        dict_role: {
          '2': '系统管理员',
          '3': '教练员',
          '4': '办公室',
          '5': '训练科',
          '6': '人事科',
          '7': '医务室',
          '8': '体科所',
          '9': '校领导',
          '10': '学生科',
          '11': '教务科',
          '12': '文化教师',
          '13': '团委',
          '0': '宿舍管理',
          '1': '保险管理',
          '-2': '枪支管理',
        },
        planCount: '_',
        empCount: '_',
        playerCount: '_',
        metaCount: '_',
        regulationCount: '_',
      }
    },
    computed: {
      ...mapGetters([
        'name'
      ]),
      roleId() {
        let sessionRole = window.sessionStorage.getItem('roleId')
        if (sessionRole) {
          return sessionRole % 14
        }
      },
    },
    mounted() {
      this.getEchartsData()
      this.getall4regulationManagement()
      this.getMetaCount()
    },
    watch: {
      metaCount(val) {
        window.sessionStorage.setItem('metaCount', val)
      },
    },
    created() {
      this.$nextTick(() => {
        this.qrcode();
      });
      // this.startMonitor()
    },
    methods: {
      // startMonitor(){
      //   let websocket = null;
      //           if (websocket == null) {
      //               websocket = new WebSocket("ws://39.108.61.54:20000/monitor")
      //           }

      //          let userInfo = window.localStorage.getItem("userInfo")

      //           websocket.onmessage = function (message) {
      //               console.log(message)
      //           }
      //           setInterval(function () {
      //             if(websocket.readyState ==1){
      //               websocket.send(userInfo.replace("&nbsp;&nbsp;",","));
      //               console.log("链接正常")
      //             }else{
      //               console.log("链接异常")
      //               console.log(websocket)
      //             }
      //           },1000*30)
      // },
      qrcode() {
        // 生成二维码
        let port = window.location.port
        let port_name = {
          '14401': 'http://39.108.61.54:9000/apk/guangdong/%E4%BD%93%E8%82%B2%E4%BA%91.apk',
          '13201': 'http://39.108.61.54:9000/apk/jiangsu/%E4%BD%93%E8%82%B2%E4%BA%91.apk',
          '11601': 'http://39.108.61.54:9000/apk/zonghe/%E4%BD%93%E8%82%B2%E4%BA%91.apk', //综合
          '11101': 'http://39.108.61.54:9000/apk/beijing/%E4%BD%93%E8%82%B2%E4%BA%91.apk',
          '11501': 'http://39.108.61.54:9000/apk/menggu/%E4%BD%93%E8%82%B2%E4%BA%91.apk', //内蒙
          '11301': 'http://39.108.61.54:9000/apk/hebei/%E4%BD%93%E8%82%B2%E4%BA%91.apk',
          '14101': 'http://39.108.61.54:9000/apk/henan/%E4%BD%93%E8%82%B2%E4%BA%91.apk', //河南
          '12301': 'http://39.108.61.54:9000/apk/henan/%E4%BD%93%E8%82%B2%E4%BA%91.apk',
        }
        var unixTimestamp = new Date().getTime()
        let apkUrl = port_name[port] + '?' + unixTimestamp

        let qrcode = new QRCode("qrcode", {
          width: 80, // 二维码宽度，单位像素
          height: 80, // 二维码高度，单位像素
          text: apkUrl // 生成二维码的链接
        });
      },
      getMetaCount() {
        this.metaCount = 0
        let count = window.sessionStorage.getItem('metaCount')
        if (count) {
          this.metaCount = count
        } else {
          for (let i = 1; i <= 4; i++) {
            let data = {
              startDate: '2010-01-01 00:00:00',
              endDate: this.$moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00',
              usageId: i,
              scenarioId: 0,
              type: 'search',
            }
            meta_data_selectPlayers(data).then(res => {
              this.metaCount += res.data.length
            })
          }
        }
      },
      getall4regulationManagement() {
        let sessionregulationCount = window.sessionStorage.getItem('regulationCount')
        if (sessionregulationCount) {
          this.regulationCount = sessionregulationCount
        } else {
          all4regulationManagement().then(res => {
            this.regulationCount = res.data.length
            window.sessionStorage.setItem('regulationCount', this.regulationCount)
          })
        }
      },
      getEchartsData() {
        var personCharts = echarts.init(document.getElementById('personCharts'));
        var matchCharts = echarts.init(document.getElementById('matchCharts'));
        // 初始化数据
        let planData = JSON.parse(window.sessionStorage.getItem('planData'))
        if (planData) {
          this.planCount = planData.length
          this.planEchartsInit(planData)
        } else {
          plan_doc_select({}).then(res => {
            if (res.code === 200) {
              let data = res.data
              this.planCount = data.length
              window.sessionStorage.setItem('planData', JSON.stringify(data))
              this.planEchartsInit(data)
            }
          })
        }

        empInit().then(res => {
          this.empCount = 0
          if (res.code === 200) {
            this.empCount = res.data.length
          }
          player_select({
            newPlayer: false
          }).then(player => {
            this.playerCount = 0
            if (player.code === 200) {
              this.playerCount = player.data.length
            }
            // 指定图表的配置项和数据
            var personChartsOption = {
              title: {
                text: '人员统计'
              },
              tooltip: {},
              grid: {
                height: 250,
              },
              legend: {
                bottom: 0,
                left: 'center',
                data: ["教练员", "运动员"],
              },
              series: [{
                name: '数量',
                type: 'pie',
                data: [{
                    value: this.empCount,
                    name: "教练员"
                  },
                  {
                    value: this.playerCount,
                    name: "运动员"
                  }
                ]
              }]
            };
            // 使用刚指定的配置项和数据显示图表。
            personCharts.setOption(personChartsOption);
          })
        })
        match_statistics_all().then(res => {
          if (res.code === 200) {
            let data = res.data
            let first = 0
            let second = 0
            let third = 0
            data.forEach(item => {
              first += parseInt(item.first)
              second += parseInt(item.second)
              third += parseInt(item.third)
            })
            // 指定图表的配置项和数据
            var matchChartsOption = {
              title: {
                text: '比赛成绩统计'
              },
              tooltip: {},
              grid: {
                height: 250,
              },
              legend: {
                bottom: 0,
                left: 'center',
                data: ["金牌", "银牌", "铜牌"]
              },
              series: [{
                name: '数量',
                type: 'pie',
                data: [{
                    value: first,
                    name: "金牌"
                  },
                  {
                    value: second,
                    name: "银牌"
                  },
                  {
                    value: third,
                    name: "铜牌"
                  },
                ],
                color: ['#e39445', '#c1c3d4', '#6d4710'],
              }]
            };
            // 使用刚指定的配置项和数据显示图表。
            matchCharts.setOption(matchChartsOption);
          }
        })
      },
      planEchartsInit(data) {
        var planCharts = echarts.init(document.getElementById('planCharts'));

        let dict_docClass = {
          2: "阶段训练计划",
          26: "多年训练计划",
          27: "全年训练计划",
          28: "冬训阶段计划",
          29: "冬训小结",
          30: "赛前阶段训练计划",
          31: "参赛预案",
          32: "年度比赛总结",
          33: "周训练计划",
          34: "课时训练计划",
          35: "全年训练总结",
          36: "年度专业研究论文",
        }
        let seriesData = []
        let xAxisData = []
        for (let key in dict_docClass) {
          let arr = []
          xAxisData.push(dict_docClass[key])
          data.forEach(item => {
            if (key == item.docClassId) {
              arr.push(key)
            }
          })
          seriesData.push(arr.length)
          let roleArr = [0, 1, 6, 12, 13]
          if (roleArr.indexOf(this.roleId) > -1) {
            seriesData = []
          }
        }
        const chartColor = [
          "#7884f2",
          "#fa7882",
          "#f5d76e",
          "#3fc380",
          "#64c1f4",
          "#ec7063",
          "#f7ca84",
          "#87d37c",
          "#bcb9ed",
          "#dcb6f2",
          "#ffc5a1",
          "#8acfc2",
          "#4183d7",
          "#663399",
          "#d2527f",
          "#d2d7d3"
        ];
        // 指定图表的配置项和数据
        var planChartsOption = {
          title: {
            text: '训练计划统计'
          },
          tooltip: {},
          grid: {
            height: 200,
          },
          legend: {
            data: ['数量']
          },
          xAxis: {
            data: xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 40,
              textStyle: {
                color: "#a9a9a9", //更改坐标轴文字颜色
                fontSize: 10 //更改坐标轴文字大小
              },
            },
          },
          yAxis: {},
          series: [{
            name: '数量',
            type: 'bar',
            data: seriesData,
            itemStyle: {
              color: params => {
                return chartColor[params.dataIndex]
              }
            }
          }]
        };
        planCharts.hideLoading();
        // 使用刚指定的配置项和数据显示图表。
        planCharts.setOption(planChartsOption);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-container {
    height: 100%;
    padding: 10px;

    .top {
      display: flex;
      justify-content: space-between;
      /*align-items: center;*/
    }

    .top-module {
      width: 15%;
      height: 100px;
      border-radius: 10px;
      font-size: 18px;
      color: #6a6767;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 5px 5px #EEEEEE;
      box-sizing: border-box;
    }

    .top-module:hover {
      .code {
        z-index: 999;
      }
    }

    .top-module p {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #f1f0f0;
      padding: 0 10px;
      margin: 0;
    }

    .top-module a {
      height: 60px;
      line-height: 60px;
      display: block;
      margin: 10px auto;
      font-size: 22px;
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    .content-module {
      width: 32%;
      height: 350px;
      border-radius: 10px;
      font-size: 18px;
      color: #6a6767;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 5px 5px #EEEEEE;
      padding: 10px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    .bottom-module {
      width: 32%;
      height: 400px;
      border-radius: 10px;
      font-size: 18px;
      color: #6a6767;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 5px 5px #EEEEEE;
      border-bottom: 1px solid #f1f0f0;
      padding: 10px;

      .trainingPlan {
        overflow: auto;
      }
    }

    .bottom-module p {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #f1f0f0;
      padding: 0 10px;
      margin: 0;
    }

    .bottom-module .plan {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .bottom-module .plan:hover {
      background-color: #eeeeee;
    }

    .bottom-module .plan a {
      text-align: right;
      margin-right: 5px;
    }

    .assessment {
      display: flex;
      justify-content: space-between;
      overflow: auto;
      align-items: center;
      padding: 10px;
    }

    .assessment-module {
      width: 24%;
      height: 325px;
      border-radius: 10px;
      font-size: 13px;
      text-align: center;
      color: #6a6767;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 0 5px 5px #EEEEEE;
      padding: 10px;
    }

    .assessment-module a {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      overflow: hidden;
    }

    .icon-font {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-font svg {
      width: 100px;
      height: 100px;
    }

    #loading {
      width: 100%;
      height: 100%;
      position: absolute;
      display: none;
      z-index: 998;
    }

    #loading div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .pre-scrollable::-webkit-scrollbar {
      /*滚动条整体样式*/

      width: 10px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;

    }

    .pre-scrollable::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/

      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #0DA883;

    }

    .pre-scrollable::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #EDEDED;

    }
  }
</style>
